<template>
  <div class="page">
    <Navbar showBack/>
    <div class="login">
      <div class="login-form">
        <div class="logo">
          GW特能充
        </div>
        <div class="login-button">
          <button class="primary-button" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号快捷登录</button>
        </div>
      </div>
      <view class="login-footer">
        <view class="check" style="display: flex;align-items: center">
          <div style="display: flex;align-items: center" @click="setAgree()">
            <image v-if="agree" class="publish-icon" src="/static/radio_fill.png"></image>
            <image v-else class="publish-icon" src="/static/radio.png"></image>
            <text style="color: #333">我已阅读并同意</text>
          </div>
          <text style="color: #00D1B2"  @click="setAgree2()">《{{ policy.name || '登录协议'}}》</text>
        </view>
      </view>
    </div>
  </div>
</template>
<script>
import Page from "../../components/Page.vue";
import Navbar from "../../components/navbar.vue";

export default {
  name: "index",
  components: {Navbar, Page },
  data() {
    return {
      agree: false,
      policy: {
        id: 1,
        name: '登录协议'
      },
    }
  },
  onLoad() {
    this.$store.commit('logout')
    this.$api.getPolicyList({
      type: '0'
    }).then(res => {
      if (res.length) {
        this.policy = res[0]
      }
    })
  },
  methods: {
    onGetPhoneNumber(e) {
      if (!this.agree) {
        uni.showToast({
          title: '请先阅读并同意登录协议',
          icon: 'none'
        })
        return
      }
      if(e.detail.errMsg === 'getPhoneNumber:ok') {
        uni.showLoading({
          title: '登录中...'
        })
        let that = this
        const { detail: { encryptedData, iv, code: phoneCode } } = e;
        console.log(e)
        wx.login({
          async success(loginRes) {
            const { code: loginCode } = loginRes;
            if (loginCode) {
              console.log('loginRes',loginRes)
              try {
                const response = await that.$api.wxlogin({
                  loginCode,
                  phoneCode,
                  // 创建随机数
                  state: Math.random().toString(36).substr(2) + new Date().getTime(),
                });
                uni.showToast({
                  title: '登录成功',
                  icon: 'success'
                })
                that.$store.commit('SET_TOKEN', response.accessToken)
                uni.reLaunch({
                  url: '/pages/home/index'
                })
              } catch (error) {
                uni.showToast({
                  title: error,
                  icon: 'none'
                })
                console.error('请求后端接口失败:', error);
              }
            }
          }
        })
      }
    },
    setAgree(){
      this.agree =! this.agree;
    },
    setAgree2() {
      uni.navigateTo({
        url: '/pages/policy/policy?id=' + this.policy.id
      })
    },
  }

}
</script>

<style lang="scss">

.login {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .logo {
    margin: 100rpx auto;
    height: 100rpx;
    text-align: center;
    font-size: 48rpx;
    font-weight: bold;
  }
  .login-button {
    padding: 60rpx 0 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .primary-button {
      width: 630rpx
    }
  }
  .login-footer {
    padding-bottom: 100rpx;
    width: 100%;
    font-size: 28rpx;
    color: #999;
    display: flex;
    justify-content: center;
    margin-top: 30rpx;
    .publish-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }
}
</style>
